<template>
  <div>
    <van-nav-bar fixed safe-area-inset-top>
      <template #left>
        <img
          @click="toPersonInfo()"
          :src="userInfo.avatar"
          class="myView-avatar"
        />
        &nbsp; &nbsp;
        <span @click="toPersonInfo()" style="font-size: 20px">{{
          userInfo.name
        }}</span>
      </template>
      <template #right>
        <img @click="toSetting()" src="../../assets/icon/shezhi.png" />
      </template>
    </van-nav-bar>
    <div class="my-view-all">
      <br /><br /><br />
      <!-- <div class="grid-panel">
        <h5>我的订单</h5>
        <van-grid :border="false">
          <van-grid-item @click="toOrderDetailAll()">
            <img class="van-grid-img" src="../../assets/icon/dingdan3.png" />
            <div class="van-grid-text">全部</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/e-bike-line.png" />
            <div class="van-grid-text">进行中</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/daipingjia.png" />
            <div class="van-grid-text">待评价</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/tuikuan.png" />
            <div class="van-grid-text">退款</div>
          </van-grid-item>
        </van-grid>
      </div> -->
      <div class="grid-panel">
        <h5>我的钱包</h5>
        <van-grid :border="false" class="van-grid-panel">
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/31gouwuche.png" />
            <div class="van-grid-text">全部</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/31gouwuche.png" />
            <div class="van-grid-text">全部</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/31gouwuche.png" />
            <div class="van-grid-text">全部</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/31gouwuche.png" />
            <div class="van-grid-text">全部</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="grid-panel">
        <h5>互动中心</h5>
        <van-grid :border="false" class="van-grid-panel">
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/youleyuan.png" />
            <div class="van-grid-text">游乐园</div>
          </van-grid-item>
          <van-grid-item>
            <img
              class="van-grid-img"
              src="../../assets/icon/xianjinhongbao.png"
            />
            <div class="van-grid-text">天天赚现金</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/lihe.png" />
            <div class="van-grid-text">0元夺宝</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/youhuijuan.png" />
            <div class="van-grid-text">天天抽奖</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/haoyou.png" />
            <div class="van-grid-text">饭搭子</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/puke.png" />
            <div class="van-grid-text">超级消不停</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/shuiguo.png" />
            <div class="van-grid-text">美味天天连</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/069.png" />
            <div class="van-grid-text">梦幻小院</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="grid-panel">
        <h5>更多功能</h5>
        <van-grid :border="false">
          <van-grid-item @click="toAddressList()">
            <img class="van-grid-img" src="../../assets/icon/dizhi.png" />
            <div class="van-grid-text">我的地址</div>
          </van-grid-item>
          <van-grid-item>
            <img
              class="van-grid-img"
              src="../../assets/icon/chakantieziguanzhu.png"
            />
            <div class="van-grid-text">店铺关注</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/e-bike-line.png" />
            <div class="van-grid-text">邀友跑单</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/zhangdan.png" />
            <div class="van-grid-text">我的账单</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/kefu.png" />
            <div class="van-grid-text">我的客服</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/zuji.png" />
            <div class="van-grid-text">浏览记录</div>
          </van-grid-item>
          <van-grid-item>
            <img
              class="van-grid-img"
              src="../../assets/icon/public-welfare.png"
            />
            <div class="van-grid-text">我的公益</div>
          </van-grid-item>
          <van-grid-item>
            <img class="van-grid-img" src="../../assets/icon/fapiao.png" />
            <div class="van-grid-text">发票助手</div>
          </van-grid-item>
        </van-grid>
      </div>
      <br />
    </div>
    <footer-view></footer-view>
  </div>
</template>

<script setup lang="ts">
import http from "../../utils/http"; //导入异步交互的工件
import FooterView from "../footer/FooterView.vue";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";

//路由编程区
const router = useRouter();
function toPersonInfo() {
  router.push({ path: "/personInfo" });
}
function toSetting() {
  router.push({ path: "/setting" });
}
function toAddressList() {
  router.push("/addressList");
}

//数据请求区
//1.根据用户登录信息获取用户的数据
const id = localStorage.getItem("userId"); //用户登录信息
const userInfo = ref({}); //用户个人信息

const getUserInfoById = async () => {
  try {
    const response = await http.get(`/user/getUserById/${id}`);
    userInfo.value = response.data.data;
  } catch (error) {
    console.error(error);
  }
};

onMounted(() => {
  getUserInfoById();
});
</script>

<style lang="scss">
.myView-avatar {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.my-view-all {
  background-color: #f3f7fa;

  .hidden-sidebar {
    display: none;
  }
}

img {
  width: 28px;
  padding: 0px;
}

.grid-panel {
  margin: 10px;
  border-radius: 15px;
  padding: 0px;
  background-color: #fefefe;
  box-shadow: 0px 20px #f4f8fb;

  h5 {
    margin: 0px;
    padding-top: 10px;
    padding-left: 10px;
  }

  .van-grid-img {
    width: 28px;
    padding: 0px;
  }

  .van-grid-text {
    width: 60px;
    height: 18px;
    text-align: center;
    color: var(--van-grid-item-text-color);
    font-size: var(--van-grid-item-text-font-size);
    line-height: 1.5;
    word-break: break-all;
    margin: 5px 0 0;
  }
}

.van-grid-item__content {
  background-color: #fefefe;
  border-radius: 15px;
}

.van-nav-bar {
  --van-nav-bar-height: 60px;
  --van-nav-bar-background: #f3f7fa;
}
</style>